<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Reproduction</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            background-color: #ffffff;
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="320"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters for drawing
        const s = 110; // Side length of one square
        const x0 = (canvas.width - 3 * s) / 2; // Center the diagram horizontally
        const y0 = 80; // Top y-coordinate of the diagram
        const w = 3 * s; // Total width of the diagram
        const h = s; // Total height of the diagram
        const lineWidth = 2;
        const labelFont = "italic 22px 'Times New Roman'";
        const verticalLabelFont = "22px 'Times New Roman'";
        const termFont = "22px 'Times New Roman'";
        const captionFont = "20px 'SimSun', 'STSong', serif";
        const labelOffsetY = 25; // Vertical offset for top/bottom R labels
        const labelOffsetX = 25; // Horizontal offset for vertical R labels from the line

        // --- Draw the circuit grid ---
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = 'black';

        // Outer rectangle
        ctx.strokeRect(x0, y0, w, h);

        // Inner vertical lines
        ctx.beginPath();
        ctx.moveTo(x0 + s, y0);
        ctx.lineTo(x0 + s, y0 + h);
        ctx.moveTo(x0 + 2 * s, y0);
        ctx.lineTo(x0 + 2 * s, y0 + h);
        ctx.stroke();

        // --- Draw the labels ---
        ctx.fillStyle = 'black';
        ctx.textBaseline = 'middle';

        // Resistor labels 'R' (Top and Bottom)
        ctx.font = labelFont;
        ctx.textAlign = 'center';

        // Top resistors
        ctx.fillText('R', x0 + s / 2, y0 - labelOffsetY);
        ctx.fillText('R', x0 + s + s / 2, y0 - labelOffsetY);
        ctx.fillText('R', x0 + 2 * s + s / 2, y0 - labelOffsetY);

        // Bottom resistors
        ctx.fillText('R', x0 + s / 2, y0 + h + labelOffsetY);
        ctx.fillText('R', x0 + s + s / 2, y0 + h + labelOffsetY);
        ctx.fillText('R', x0 + 2 * s + s / 2, y0 + h + labelOffsetY);

        // Vertical resistors (placing them according to the visual layout in the original image)
        ctx.font = verticalLabelFont;

        // R for the leftmost vertical line (at x=x0), placed inside the first square.
        ctx.fillText('R', x0 + labelOffsetX, y0 + h / 2);
        // R for the line between 1st & 2nd squares (at x=x0+s), placed inside the first square.
        ctx.fillText('R', x0 + s - labelOffsetX, y0 + h / 2);
        // R for the line between 2nd & 3rd squares (at x=x0+2s), placed inside the second square.
        ctx.fillText('R', x0 + 2*s - labelOffsetX, y0 + h / 2);
        // R for the rightmost vertical line (at x=x0+3s), placed inside the third square.
        ctx.fillText('R', x0 + 3*s - labelOffsetX, y0 + h / 2);
        
        // Terminal labels 'A' and 'B'
        ctx.font = termFont;
        
        // A at bottom-left corner
        ctx.textAlign = 'right';
        ctx.fillText('A', x0 - 10, y0 + h); 

        // B at top-right corner
        ctx.textAlign = 'left';
        ctx.fillText('B', x0 + w + 10, y0); 

        // Caption
        ctx.font = captionFont;
        ctx.textAlign = 'center';
        const captionText = "电图 4.15.1";
        const captionY = y0 + h + labelOffsetY + 40;
        ctx.fillText(captionText, canvas.width / 2, captionY);
    </script>
</body>
</html>